<template>
  <div class="comp-title" ref="compTitle">
    <p class="title-text" ref="titleText"></p>
  </div>
</template>
<script>
// https://cn.vuejs.org/v2/style-guide/#组件-实例的选项的顺序-推荐
export default {
  name: 'CompTitle',
  components: {},
  model: {},
  props: {
    text: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    init(){
      let tl = new TimelineMax({})
      let tw1 = TweenMax.to(this.$refs.compTitle, .5, {opacity: 1, width: '100%'})
      let tw2 = TweenMax.to(this.$refs.titleText, .5, {opacity: 1, scrambleText: {
              text: this.text,
              chars: '_ ',
              speed: 0.3
          }})
      tl.addLabel('start')
          .add(tw1, 'start+=0')
          .add(tw2, 'start+=0.3')
      return tl
    }
  }
}
</script>
<style lang="scss" scoped>
$c-h: 30px;
.comp-title {
  position: relative;
  height: 30px;
  background: url(../../assets/imgs/topTitle/comp_title_bg.png) no-repeat
  center;
  opacity: 0;
  width: 0;
  .title-text {
    padding-left: 10px;

    color: #fff;

    text-shadow: 1px 1px 4px #25a0ff, 1px -1px 4px #25a0ff, -1px 1px 4px #25a0ff,
    -1px -1px 3px #25a0ff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 30px;
    opacity: 0;
  }
}
</style>